<template>
  <el-row>
    <div class="section-input">
      <el-checkbox-group v-model="question.answer">
        <div v-if="question.style==='v'">
          <section v-for="option in question.options" :key="option.key">
            <el-checkbox :label="option.text" :checked="option.checked">{{option.text}}V</el-checkbox>
          </section>
        </div>
        <div v-else>
          <section v-for="option in question.options" :key="option.key" style="float:left">
            <el-checkbox :label="option.text" :checked="option.checked">{{option.text}}
              <span v-if="tactics && option.tactics">——
                <span>{{makeTacticsName(tactics,option.tactics[option.tactics.length-1])}}：{{option.point}}</span>
              </span>
            </el-checkbox>
          </section>
        </div>
      </el-checkbox-group>
    </div>
  </el-row>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "view-i-checkbox",
    props:['question','tactics'],
    data(){
      return {
      }
    },
    watch:{
      question(nv,ov){
        // console.log(nv)
      }
    },
    created(){
      console.log(this.question)
      // this.question.options.forEach(o=>{
      //   this.question.answer.forEach(a=>{
      //     if(a === o.text){
      //       Vue.set(this.question,'point',o.point)
      //       Vue.set(this.question,'tactics',o.tactics)
      //     }
      //   })
      // })
    },
    methods:{
      makeTacticsName(a,id){
        let name = null
        for(let i=0;i<a.length;i++){
          let tmp = a[i]
          if(tmp.id === id){
            return tmp.name
          }else if(tmp.childrens){
            name = this.makeTacticsName(tmp.childrens,id)
            if(name != null) return name
          }
        }
        return name
      },
    }
  }
</script>

<style lang="scss">
</style>
